<div class="overlay about">
  <div class="bg" ng-click="$ctrl.close()"></div>
  <div class="box">
    <button class="close-button" ng-click="$ctrl.close()">×</button>
    <div class="content">
      <h2>About</h2>

      <div class="diagram" ng-hide="$ctrl.details">        
        <p>{{$ctrl.copy}}</p>

        <div ng-click="$ctrl.details = true"><img src="../../assets/img/sensors-connected.jpg" alt="" /></div>
      </div>

      <div class="details" ng-show="$ctrl.details">
        <p class="back" ng-click="$ctrl.details = false">Back</p>
        <div class="images">
          <!-- arduino -->
          <div class="detail arduino">
            <img 
              src="{{$ctrl.arduino.img}}" 
              alt="" 
              width="{{$ctrl.arduino.width}}" 
              height="{{$ctrl.arduino.height}}" />

            <label>{{$ctrl.arduino.name}}</label>

          </div>
          <!-- sensors -->
          <div class="detail" ng-class="'detail' + $index" ng-repeat="item in $ctrl.items">
            <img 
              src="{{item.img}}" 
              alt="" 
              width="{{item.width}}" 
              height="{{item.height}}" 
              ng-mouseover="$ctrl.currentDetail = $index" 
              ng-mouseleave="$ctrl.currentDetail = null" />

            <label>{{item.name}}</label>

            <popover info="item" ng-show="$ctrl.currentDetail === $index"></popover>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>